<div style="padding: 50px;">


  <h1>Column Filters for Material Table</h1>
  <h4><a href="https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/" target="_blank">
      <-- Back to tutorial @ FreakyJolly.com</a>
  </h4>

  <div>
    <mat-form-field *ngFor="let filter of filterSelectObj" style="margin-left: 15px;">
      <mat-label>Filter {{filter.name}}</mat-label>
      <select matNativeControl name="{{filter.columnProp}}" [(ngModel)]="filter.modelValue"
        (change)="filterChange(filter,$event)">
        <option value="">-- Select {{filter.name}} --</option>
        <option [value]="item" *ngFor="let item of filter.options">{{item}}</option>
      </select>
    </mat-form-field>
    &nbsp;
    <button mat-flat-button color="warn" (click)="resetFilters()">Reset</button>
  </div>

  <table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> id </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef> username </th>
      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>

    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef> phone </th>
      <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
    </ng-container>

    <ng-container matColumnDef="website">
      <th mat-header-cell *matHeaderCellDef> website </th>
      <td mat-cell *matCellDef="let element"> {{element.website}} </td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>


</div>

<!-- <div class="router-wrapper" appScollprogress> -->
<router-outlet></router-outlet>
<!-- </div> -->

<!-- <button (click)="createPdf()">Create PDF</button> -->

<!-- <mat-table [dataSource]="dataList" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef [ngClass]="'w-75'"> ID </mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="'w-75'"> {{element.id}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> Username </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.phone}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="website">
    <mat-header-cell *matHeaderCellDef> Website </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.website}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table> -->


<!-- <table mat-table [dataSource]="dataList">

  <ng-container matColumnDef="id">
    <th class="w-75 th-center" mat-header-cell *matHeaderCellDef> id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> username </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> email </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>

  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef> phone </th>
    <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
  </ng-container>

  <ng-container matColumnDef="website">
    <th mat-header-cell *matHeaderCellDef> website </th>
    <td mat-cell *matCellDef="let element"> {{element.website}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table> -->